<!DOCTYPE html>
<html>
<head>
  <title>OpenLayers TileLayer Example</title>
  <style>
    #map {
      width: 100%;
      height: 900px;
    }
  </style>
  <link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" type="text/css">
  <script src="https://openlayers.org/en/v6.5.0/build/ol.js"></script>
</head>
<body>
  <div id="map"></div>
  <script>
    // 创建地图实例
    var map = new ol.Map({
      target: 'map',
      view: new ol.View({
        center: [3664204.134, 13524792.077], 
        zoom: 2
      })
    });

    // 底图
    var tileLayer1 = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url:'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
      })
    });
    // 影像图层
    var tileLayer2 = new ol.layer.Tile({
      source: new ol.source.XYZ({
        // 输入发布的接口
        url:'http://132.1.11.49:5002/ShangHai_I_v1/MapServer/tile/{z}/{y}/{x}'
      })
    });
    // 矢量图层
    var tileLayer3 = new ol.layer.Tile({
      source: new ol.source.XYZ({
        //url:'http://132.1.11.49:5002/shanghai_vector_map_tpk/MapServer/tile/{z}/{y}/{x}'
        url:'http://132.1.11.49:5002/ShangHai_V_v1/MapServer/tile/{z}/{y}/{x}'
      })
    });

    // 将瓦片图层添加到地图中
    map.addLayer(tileLayer1);
    map.addLayer(tileLayer2);
    map.addLayer(tileLayer3);
  </script>
</body>
</html>